import type { VNode } from 'vue'
export interface SelectOption {
  label: string
  value: string
  disabled?: boolean
}
//自定义模版
export type RenderLabelFunc = (option: SelectOption) => VNode
export type CustomFilterFunc = (value: string) => SelectOption[]
export type CustomFilterRemoteFunc = (value: string) => Promise<SelectOption[]>

export interface SelectProps {
  // v-model
  modelValue: string
  // 选项
  options?: SelectOption[]
  // 一些基本表单属性
  placeholder: string
  disabled?: boolean
  clearable?: boolean
  renderLabel?: RenderLabelFunc
  // 过滤功能
  filterable?: boolean
  filterMethod?: CustomFilterFunc
  // 远程搜索
  remote?: boolean
  remoteMethod?: CustomFilterRemoteFunc
}

// 记录选择的状态，记录input内容和哪条option被选中了
export interface SelectStates {
  inputValue: string
  selectedOption: null | SelectOption
  mouseHover: boolean
  // 远程搜索是否在加载
  loading: boolean
  // 记录上下键移动到什么位置
  highlightIndex: number
}
export interface SelectEmits {
  (e: 'change', value: string): void
  (e: 'update:modelValue', value: string): void
  (e: 'visible-change', value: boolean): void
  (e: 'clear'): void
}
